<script setup>
import { useAttrs } from 'vue';

const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  hideHeader: {
    type: Boolean,
    default: false
  },
  hideBack: {
    type: Boolean,
    default: false
  },
  rightText: {
    type: String,
    default: ''
  }
});
if (props.title) {
  document.title = unref(props.title);
}
watch(
  () => props.title,
  (val) => {
    document.title = val;
  }
);

const emit = defineEmits(['click-right']);

const attr = useAttrs();
const newAttr = {};
Object.entries(attr).forEach(([k, v]) => {
  if (k !== 'class') newAttr[k] = v;
});

const onClickRight = () => {
  emit('click-right');
};
</script>

<template>
  <div class="x-page">
    <slot name="header">
      <XHeader
        v-if="!hideHeader"
        :title="title"
        :left-arrow="!hideBack"
        v-bind="newAttr"
        :right-text="rightText"
        @click-right="onClickRight"
      >
        <template #right>
          <slot name="right" >
          <div v-if="rightText.length>0"  style="color:white">{{rightText}}</div>
          </slot>
        </template>
      </XHeader>
    </slot>

    <div class="page-container">
      <slot></slot>
    </div>
  </div>
</template>

<style lang="stylus" scoped>
.x-page
  display flex
  flex-direction column
  width 100vw
  max-width 768px
  height 100vh
  padding-bottom env(safe-area-inset-bottom, 20px)
  margin 0 auto

  .page-container
    flex-grow 1
    overflow-y auto
</style>
